

class MiSocketApiList extends React.Component {


    res_data = {
        id: {
            label: '序号',
            width: 50
        },
        name: {
            label: '名称',
            width: 280
        },
        useData: {
            label: '是否直传',
            width: 300,
        },
        useCode: {
            label: '备注',
            width: 300,
        }
    }




    getColumns(){
        let res_data = this.res_data;
        let columns = [];
        let tableWidth = this.tableWidth;
        for(let key in res_data){
            tableWidth += res_data[key]['width'];
            let o = {
                title: res_data[key].label,
                dataIndex: key,
                key: key,
                width: res_data[key]['width'],
                height:400,
                render: (text, row, index) => {
                    return this.viewRender(key, res_data, text, row, index);
                }
            };
            columns.push(o);
        }

        columns.push({
            title: '操作',
            key: 'operation',
            width: 200,
            render: (text, row, index) => {
                return this.actionRender(text, row, index);
            },
        });
        return columns;
    }

    constructor(props) {
        super(props);
        this.fixedKey="id";
        this.columns=this.getColumns();
        this.state = {
            data: [],
            curData:{name:""},
            pagination: {   //搜索参数
                current: 1,
                pageSize: 20,
                keywords: '',
                order: '',
                filter: {},
                total: 0,
                showSizeChanger: true,
                pageSizeOptions: ['5','20','30','50'],
                onShowSizeChange: (current, pageSize) => {
                    const { pagination } = this.state;
                    pagination.pageSize = pageSize;
                    this.setState({
                        pagination
                    });
                }
            }
        }
    }
    componentDidMount() {
        let that=this;
        this.fetch();
        let jsonPreview_id=document.querySelector("#jsonPreview_id");
        if(jsonPreview_id){
            that.contentWindow=jsonPreview_id.contentWindow;
            if( that.contentWindow){
                that.contentWindow.onload=function (){
                    that.contentWindow.jsonEditorLeft.set({})
                }
            }
        }
    };
    actionRender(text, row, index) {
        return(
            <p >
                <a href="javascript:void(0)" onClick={(e)=>{
                    e.stopPropagation();
                    this.callApi(row);
                }} style={{marginLeft: 10}} >调用</a>
            </p>
        )
    }

   async callApi(row){
        this.contentWindow.jsonEditorRight.set({});
        try {
            this.contentWindow.jsonEditorLeft.get()
        }catch (e){
            message.error(e.toString());
            return
        }
       let r= await MIO.changshaclientIpcRequest(this.contentWindow.jsonEditorLeft.get());
       this.contentWindow.jsonEditorRight.set(r);
    }

    async fetch() {
        let r=  await MIO.configList({parentId:21})
        this.setState({
            data: r.data.dataList,
            total: r.data.total
        })
    }

    viewRender(key, res_data, text, row, index) {
        let title, content;
        let textAlign = 'left';
        if(key=='useData'){
            return <p style={{ width: res_data[key]['width'] - 32, textAlign: textAlign, margin: 0,"overflow": "hidden"}}>
                <Tooltip placement="left"  title={text}>
                    {text}
                </Tooltip>
            </p>

        }else {
            title = row[key];
            content = row[key];
        }
        return <p style={{ width: res_data[key]['width'] - 32, textAlign: textAlign, margin: 0, "overflow": "hidden", "textOverflow": "ellipsis", "whiteSpace": "nowrap" }}>
            <Tooltip placement="top" title={title}>
                {content}
            </Tooltip>
        </p>
    }
    //分页
    handleTableChange(pagination){
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        },() => {
            this.fetch()
        });
    }

    //表格点击
    handleTableClick(record, index, e){
        this.setState({
            curData:record
        });
        this.contentWindow.jsonEditorLeft.set(JSON.parse(record.payload));
    }


    render() {
        console.log(this.state.curData.name)
          return (
            <div>
                <Input.Search
                    placeholder="刷新"
                    onSearch={v=>{this.fetch()}}
                    style={{ width: 300 }}
                />
                &nbsp;  &nbsp;
                <a  target="_blank" href={"https://www.sojson.com/yasuo.html"}>Json压缩</a>
                <br/>

                <br/>
                <Table
                    scroll={{y:120}}
                    dataSource={this.state.data}
                    columns={this.columns}
                    pagination={this.state.pagination}
                    onChange={this.handleTableChange.bind(this)}
                    onRowClick={this.handleTableClick.bind(this)}
                />
                <div>{this.state.curData.name}</div>
                <iframe id={"jsonPreview_id"} src={ "./jsonPreview.html"} style={{width:'100%',height:'500px',border:'none'}}></iframe>
            </div>
        )
    }
}











